Page builder
Page builder is a beta feature, please contact support if you have any issues.
The page builder option allows for greater flexibility in how your main app screen is displayed. The page builder section opperates off the concept of 'sections' with each section displaying in the order it is added.
To add a new section, simply select the Add section
button at the top right of the screen.'
Sections can be moved up or down using the move up or move down buttons.
You must select ‘page builder’ as the main home screen type in the setting section for these options to display in app
Main settings
The main secttings section allows exposes global settings for the page builder.
Setting | Value | Description |
---|---|---|
Transparent header | Yes/No | This setting will determine if the top header should show. Setting this to yes will make the top header transparent, and only show the hamburger menu and search icon |
Sponsor banner | Yes/No | This setting will determine if a sponsor banner should be shown on the main page or not. |
Fixed first slider | Yes/No | This setting will determine if the first section should be 'fixed' or not. When set to yes, the first section will be fixed and content will scroll under it |
Top icon color | White/Black | This setting will set the top icons Hamburger menu & Search Icon color to white or black, depending on your needs |
Max width web | Integer px | This is the max width of the main container for the web view. This means the display will only scale to a maximum of this width |
Max width Mobile | Integer px | This is the max width of the main container for the phone view. This means the display will only scale to a maximum of this width |
Section settings
Each section has its own set of settings that allow you to customize what each section does.
Setting | Value | Description |
---|---|---|
Title | Text | The title of the section, this will display above the section |
Section | The number of icons and icon display type is controlled in the configs section | |
Auto play | Yes/No | The auto play setting will determine if the slider should play automatically or only be moved on swipe. |
Pause between | Integer | The pause between is how long in millaseconds a slide should pause before moving to the next. This is only valid when auto play is set to yes |
Speed | Integer | The speed is the speed of the transition to the next slide in millaseconds |
Space between | Integer | The space between allows you set in pixels the space between each slide. Must be more then 1 slider per view |
Type | The type section will determine how the slide will display. Only Custom sections can use the Hero section, all other will use default | |
Effect | The effect will control how the transition will look | |
Slide per view | Integer | The number of sliders to show in a view. Note: It is best to not show more then 3 or 4 items per-slide as it can cause undesirable display issues |
Margin top M | Integer | The margin top M is the top margin in pixels for mobile |
Margin top W | Integer | The margin top W is the top margin in pixels for web |
Margin bottom M | Integer | The margin bottom M is the top margin in pixels for mobile |
Margin bottom W | Integer | The margin bottom W is the top margin in pixels for web |
Margin left M | Integer | The margin left M is the left margin in pixels for mobile |
Margin left W | integer | The margin left W is the left margin in pixels for web |
Margin right M | Integer | The margin right M is the right margin in pixels for mobile |
Margin right W | Integer | The margin right W is the right margin in pixels for web |
Card type |
Custom slide settings
When setting the type to custom, a new section will appear, allowing you to set custom slide. Because custom slides have no direct mapping, you must define each element in the slide, including the image and where it will link to.
Setting | Values | Definition |
---|---|---|
Height | String in pixels | The height in pixels of the slide eg 150px |
Height W | String Height W | The height in pixels of the slide in web view eg 150px |
Position | The position of the slide and any elements. | |
Size | How the background image will be treated. Contain will scale the image to contain it in the allow space, while cover will scale the image. | |
Repeat | Determines if the background image should repeat of not | |
Background image | URL | The main slide background image. |
Logo | URL | The logo will overlay the background image |
Link | URL | A link or section for where this slide should go to when clicked or tapped |